<template>
  <el-container>
    <el-aside width="220px" class="aside-color">
      <home-nav  @breadid="breadid"></home-nav>
    </el-aside>
    <el-container>
      <el-header>
        <home-headers :breadarr="breadarr"></home-headers>
      </el-header>

      <el-main class="main-color">
        <div class="main-divcolor">
          <router-view></router-view>
        </div>

      </el-main>

    </el-container>

  </el-container>
</template>

<script>
import homeNav from "../components/homeNav.vue";
import HomeHeaders from "@/components/homeHeader.vue";
export default {
  components: { homeNav, HomeHeaders },
  data() {
    return {
      // one: [
      //   { id: 1, title: "工作台", url: "/home", icon: "el-icon-s-tools", son: "" },
      //   {
      //     id: 2,
      //     title: "会员管理",
      //     url: "/memberManage",
      //     icon: "el-icon-user-solid",
      //     son: [
      //       { id: 2 - 1, title: "会员档案", url: "/memberManage/memberManager", icon: "" },
      //       { id: 2 - 2, title: "体检上传", url: "/memberManage/memberTestManager", icon: "" },
      //       { id: 2 - 3, title: "会员统计", url: "/memberManage/memberStatistic", icon: "" },
      //     ],
      //   },
      //   {
      //     id: 3,
      //     title: "预约管理",
      //     url: "/book",
      //     icon: "el-icon-s-order",
      //     son: [
      //       { id: 3 - 1, title: "预约列表", url: "/book/reservationlist", icon: "" },
      //       { id: 3 - 2, title: "预约设置", url: "/book/appointmentset", icon: "" },
      //       { id: 3 - 3, title: "套餐管理", url: "/book/packagemanagement", icon: "" },
      //       { id: 3 - 4, title: "检查项管理", url: "/book/checkitemmanagement", icon: "" },
      //     ],
      //   },
      //   {
      //     id: 4,
      //     title: "健康评估",
      //     url: "/healthAssessment",
      //     icon: "el-icon-phone",
      //     son: [
      //       { id: 4 - 1, title: "体侧测评", url: "/healthAssessment/physiqueHealth", icon: "" },
      //       {
      //         id: 4 - 2,
      //         title: "心理测评",
      //         url: "/healthAssessment/psychologicalTests",
      //         icon: "",
      //       },
      //       { id: 4 - 3, title: "风险测评", url: "/healthAssessment/riskAppraisal", icon: "" },
      //     ],
      //   },
      //   {
      //     id: 5,
      //     title: "健康干预",
      //     url: "/healthIntervene",
      //     icon: "el-icon-s-cooperation",
      //     son: [
      //       { id: 5 - 1, title: "人群分类", url: "/healthIntervene/memberClassify", icon: "" },
      //       { id: 5 - 2, title: "干预方案", url: "/healthIntervene/intervene", icon: "" },
      //       { id: 5 - 3, title: "随访日记", url: "/healthIntervene/visit", icon: "" },
      //       { id: 5 - 4, title: "指标管理", url: "/healthIntervene/pointerManagement", icon: "" },
      //       { id: 5 - 5, title: "模板管理", url: "/healthIntervene/interveneFormwork", icon: "" },
      //     ],
      //   },
      //   {
      //     id: 6,
      //     title: "知识库",
      //     url: "/repository",
      //     icon: "el-icon-s-management",
      //     son: [
      //       { id: 6 - 1, title: "评估建议", url: "/repository/evaluation", icon: "" },
      //       { id: 6 - 2, title: "健康方案", url: "/repository/healthPlan", icon: "" },
      //       { id: 6 - 3, title: "运动项目库", url: "/repository/sport", icon: "" },
      //       { id: 6 - 4, title: "膳食库", url: "/repository/meals", icon: "" },
      //       { id: 6 - 5, title: "疾病库", url: "/repository/disease", icon: "" },
      //     ],
      //   },
      //   {
      //     id: 7,
      //     title: "统计分析",
      //     url: "/statistics",
      //     icon: "el-icon-s-data",
      //     son: [
      //       {
      //         id: 7 - 1,
      //         title: "工作量统计",
      //         url: "/statistics/statisticsTanle",
      //         icon: "",
      //       },
      //     ],
      //   },
      //   {
      //     id: 8,
      //     title: "系统设置",
      //     url: "/system",
      //     icon: "el-icon-s-grid",
      //     son: [
      //       { id: 8 - 1, title: "权限管理", url: "/system/admin", icon: "" },
      //       { id: 8 - 2, title: "用户管理", url: "/system/role", icon: "" },
      //       { id: 8 - 3, title: "题库管理", url: "/system/questionBank", icon: "" },
      //       { id: 8 - 4, title: "问卷管理", url: "/system/questionnaire", icon: "" },
      //     ],
      //   },
      // ],
      breadarr: ['工作台'],
    };
  },
  created() {
    // this.$store.commit("addNav", this.one);
    this.breadarr = JSON.parse(sessionStorage.getItem("breadarr"));

  },
  methods: {
    breadid(firstid, lastid) {
      // this.$store.dispatch('breadidAC',arr)
      this.breadarr = [];
      let starr = this.$store.state.NavArray;
      let starr1
      let starr2
      starr.forEach(item => {
        if(item.id == firstid){
          starr1 = item;
          this.breadarr.push(item.name);
          if(item.children.length!=0){
            item.children.forEach(child =>{
              if(child.id == lastid){
                this.breadarr.push(child.name);
              }
            })
          }
        }
      });
      sessionStorage.setItem('breadarr', JSON.stringify(this.breadarr))
    },
  },
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.aside-color {
  height: 100vh;
  background: #273146;
}

.main-color {
  background-color: #F4F4F4;
}

.main-divcolor {
  padding: 20px;
  width: calc(100vw - 300px);
  background: white;
  height: calc(100vh - 100px);
  overflow: auto;
}
</style>